<template>
  <el-dialog
    title="反欺诈信息"
    :visible.sync="dialogVisible"
    width="60%"
    :before-close="handleClose"
  >
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="date" label="申请日期" width="150"></el-table-column>
      <el-table-column prop="number" label="申请编号" width="150"></el-table-column>
      <el-table-column prop="reason" label="拒绝原因"></el-table-column>
      <el-table-column prop="status" label="状态" width="100"></el-table-column>
    </el-table>
    <span slot="footer" class="dialog-footer">
      <el-button @click="cancelDialog">取 消</el-button>
      <el-button type="primary" @click="closeDialog">关 闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: 'AntiFraudDialog',
  data() {
    return {
      dialogVisible: false,
      tableData: []
    }
  },
  methods: {
    showDialog() {
      // 模拟API调用获取数据
      this.fetchData().then(data => {
        this.tableData = data;
        this.dialogVisible = true;
      });
    },
    fetchData() {
      // 模拟API调用
      return new Promise((resolve) => {
        setTimeout(() => {
          const mockData = [
            {
              date: '2023-01-15',
              number: 'AP20230115001',
              reason: '身份信息不匹配',
              status: '已拒绝'
            },
            {
              date: '2023-02-20',
              number: 'AP20230220002',
              reason: '地址信息异常',
              status: '已拒绝'
            },
            {
              date: '2023-03-10',
              number: 'AP20230310003',
              reason: '联系人信息不一致',
              status: '已拒绝'
            }
          ];
          resolve(mockData);
        }, 500);
      });
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    cancelDialog() {
      this.dialogVisible = false;
    },
    closeDialog() {
      this.dialogVisible = false;
    }
  }
}
</script>

<style scoped>
.dialog-footer {
  text-align: right;
}
</style>